<template>
	<view class="main-content bg-white">
		<u-form :model="form" ref="uForm">
			<u-form-item class="padding-0-40" label="商品分类" label-width="20%">
				<u-input v-model="form.goods_category_label" placeholder="请选择产品分类" type="select" @click="goods_category_show_status = true"/>
				<u-select v-model="goods_category_show_status" :list="list" @confirm="goodsCategoryConfirm"></u-select>
			</u-form-item>
			<u-form-item class="padding-0-40" label="商品名称" label-width="20%">
				<u-input v-model="form.name" placeholder="请输入商品名称，最多64个字符" />
			</u-form-item>
			<u-gap height="20" bg-color="#eee"></u-gap>
			<u-form-item class="padding-0-40" label="商品封面" label-width="20%">
				<u-upload :width="140" :height="140" :action="action" :file-list="image"></u-upload>
			</u-form-item>
			<u-form-item class="padding-0-40" label="商品图片" label-width="20%">
				<u-upload :width="140" :height="140" :action="action" :file-list="goods_image"></u-upload>
			</u-form-item>
			<u-form-item class="padding-0-40" label="状态" label-width="20%">
				<u-radio-group v-model="form.status">
					<u-radio name="1" :icon-size="24" :label-size="24">
						立即上架
					</u-radio>
					<u-radio name="0" :icon-size="24" :label-size="24">
						放入仓库
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<!-- <u-gap height="20" bg-color="#eee"></u-gap> -->
			<u-form-item class="padding-0-40" label="商品规格" label-width="20%" v-if="form.spec_type == 2">
				<u-section :show-line="false" sub-title="" @click="specificationOperationAreaStatus = true"></u-section>
			</u-form-item>
			<u-form-item class="padding-0-40" label="价格" label-width="20%" v-if="form.spec_type == 1">
				<u-input v-model="form.one_price" placeholder="请输入价格" />
			</u-form-item>
			<u-form-item class="padding-0-40" label="库存" label-width="20%" v-if="form.spec_type == 1">
				<u-input v-model="form.one_stock" placeholder="请输入商品库存" />
			</u-form-item>
			<u-gap height="20" bg-color="#eee"></u-gap>
			<u-form-item class="padding-0-40" label="商品介绍" label-width="20%">
				<u-section :show-line="false" sub-title=""></u-section>
			</u-form-item>
		</u-form>
	</view>
</template>

<script>
	import {
		MerchantGoodsCategory
	} from '@/api/merchant';
	export default {
		data() {
			return {
				goods_category_show_status:false,
				fileList:[],
				action:'',
				form: {
					name: '',
					intro: '',
					sex: '',
					status:0,
					spec_type:1
				},
				radio: '',
				list:[],
				image:[],
				goods_image:[]
			};
		},
		onLoad() {
			MerchantGoodsCategory().then(res => {
				if(res.code == 1){
					for(var key in res.data){
						this.list.push({
							value:res.data[key].id,
							label:res.data[key].name
						})
					}
				}
			})
		},
		methods: {
			goodsCategoryConfirm(e){
				this.form.goods_category_label = e[0].label;
				this.form.first_category_id = e[0].value;
			}
		}
	};
</script>

<style lang="scss">
	uni-page-body,
	page,
	.main-content {
		height: 100%;
	}

	.padding-0-40 {
		padding: 10rpx 40rpx;
	}

	.main-content {
		// padding: 0 40rpx;
	}

	.slot-wrap {
		padding-right: 30rpx;
	}
		
	.specificationRuleSaveButton{
		background-color: #1db0fc;
		color: #FFFFFF;
		width: 90%;
		margin: 5vh auto 0;
		border-radius: 100rpx;
		position: fixed;
		left: 5%;
		bottom: 20px;
	}
	.commodity-specification-lists{
		.item{
			width: 90%;
			color: #ffffff;
			// padding: 20rpx 30rpx;	
			margin: 20rpx auto;
			padding-top: 10rpx;
			border-radius: 10rpx;
			background-color: #1db0fc;
			// overflow: hidden;
			
			.title-display-area{
				line-height: 30px;
				padding-bottom: 10rpx;
				padding: 10rpx 30rpx;
			}
			
			.content{
				border-radius: 20rpx 20rpx 10rpx 10rpx;
				display: flex;
				flex-wrap: wrap;
				padding: 20rpx;
				position: relative;
				padding-bottom: 40rpx;
				
				.table-header {
					background-color: #f3faff;
					width: 100%;
				
					.table-header-item {
						color: #1795fa;
						display: block;
						text-align: center;
						padding: 20rpx 0;
					}
				}
				
				.table-body {
					width: 100%;
				
					.table-body-item {
						color: #373737;
						display: block;
						text-align: center;
						padding: 20rpx 0;
						
					}
				}
				
				.add-rule-info-button{
					background-color: #ffffff;
					border-radius: 50%;
					color: #ddd;
					position: absolute;
					bottom: -25px;
					left: 50%;
					transform: translateX(-50%);
					z-index: 11;
				}
			}
		}
	}
	
	.padding-0{
		padding: 0 !important;
	}
	
	
	
	.add-product-specification-content,
	.add-product-specification-item-content{
		width: 60%;
		background-color: #ffffff;
		border-radius: 10px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		
		.title-display-area{
			padding-top: 40rpx;
			display: block;
			text-align: center;
		}
		
		.input-style{
			margin: 60rpx 40rpx;
		}
		
		.saveButton{
			width: 100%;
			border: none;
			color: #1db0fc;
		}
	}
	
	.add-product-specification-item-content{
		width: 90%;
	}
</style>
